<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>

<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>类型
                </label>
                <div id="pType" style="width:100%;flex:1"></div>
            </div>
            <div class="layui-form-item" id="short_video">
                <label class="layui-form-label">
                    <span class="x-red">*</span>短剧
                </label>
                <div id="pMenu" style="width:100%;flex:1"></div>
            </div>
            <div class="layui-form-item" id="activity" style="display: none;">
                <label class="layui-form-label">
                    <span class="x-red">*</span>活动
                </label>
                <div id="pActivity" style="width:100%;flex:1"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>封面
                </label>

                <button type="button" class="layui-btn" id="video_btn">上传</button><span style="font-size: 10px;">（建议尺寸宽355像素，高175像素）</span>
                <div class="layui-upload-list" style="display: none;margin-left: 110px;">
                    <img onclick="showimg(this)" class="layui-upload-img" style="width: 100px;">
                </div>
                <input type="hidden" name="cover_img" id="cover_img" value="" />
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>跳转地址
                </label>
                <div class="layui-input-block">
                    <input type="text" name="path" id="path" placeholder="封面" autocomplete="off" class="layui-input"
                        value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>排序值
                </label>
                <div class="layui-input-block">
                    <input type="text" name="sort" id="sort" placeholder="排序值" autocomplete="off" class="layui-input"
                        value="" />
                </div>
            </div>

            <input type="hidden" name="id" id="id" value="" />
            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />

        </form>
    </div>
    <script>
        let params = {
            addUrl: '/admin/banner/add',
            editUrl: '/admin/banner/edit',
            detailUrl: '/admin/banner/detail',
            hasCallback:false
        }
        form_ajax(params)
        let id = GetQueryString('id')
        let video_id,activity_id;
        let selectParams = {
            url: '/admin/video/select',
            selected: [],
            tips: '选择短剧',
            name: 'video_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMenu'
        }

        let selectActivityParams = {
            url: '/admin/activity/select',
            selected: [],
            tips: '选择活动',
            name: 'activity_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pActivity'
        }

        layui.use('form', function(){
            let form = layui.form;
            Ajax('/admin/banner/typeRadio', {}).then(result => {
                let radioHtml = '';
                $.each(result.data, function(index, value) {
                    radioHtml += '<input type="radio" name="type" lay-skin="primary" lay-filter="type"  value="'+value.key+'" title="'+value.value+'" lay-verify="radioRequired">';
                });
                $('#pType').html(radioHtml);
                form.render();
            }).then(datas =>{
                if (id) {
                    Ajax(params.detailUrl, { id }).then(result => {
                        video_id = result.data.video_id
                        activity_id = result.data.activity_id
                        if (result.data.type === 'jump'){
                            $('#short_video').show();
                            $('#activity').hide();
                            selectParams.selected = [video_id]
                            selectN(selectParams)
                        }else{
                            $('#short_video').hide();
                            $('#activity').show();
                            selectActivityParams.selected = [activity_id]
                            selectN(selectActivityParams)
                        }
                        if (result.data.cover_img) {
                            $('.layui-upload-list').show()
                            $('.layui-upload-img').attr('src', result.data.cover_img);
                        }

                        form.val("formAjax",result.data);
                        form.render();
                    });
                } else {
                    selectN(selectParams)
                    selectN(selectActivityParams)
                }
            })

            form.on('radio(type)', function(data){
                switch (data.value){
                    case 'jump':
                        $('#short_video').show();
                        $('#activity').hide();
                        selectParams.selected = [video_id]
                        selectN(selectParams)
                        break;
                    case 'activity':
                        $('#short_video').hide();
                        $('#activity').show();
                        selectActivityParams.selected = [activity_id]
                        selectN(selectActivityParams)
                        break;
                }
            });
        });

        uploadFile({
            elem: '#video_btn',
            ossUrl: '/admin/video/uploadCredentials',
            uploadSuccessCallback: function (res) {
                $('.layui-upload-list').show()
                $('.layui-upload-img').attr('src', res.url);
                $("input[name='cover_img']").val(res.url);
            },
            uploadErrorCallback: function () {
                return layer.msg('上传失败');
            }
        })
    </script>
</body>

</html>